<template>
  <view class="statistic">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <view class="statistic__title flex justify-between">
      <view class="statistic__date" @click="showCalendar = true">
        {{ date }}
      </view>
      <!-- <view class="statistic__filter"> 筛选 <u-icon name="arrow-down-fill" color="#333333" size="28"></u-icon> </view> -->
    </view>
    <view class="statistic__header">
      <view class="statistic__header-title">累计收益(元)</view>
      <view class="statistic__header-money">{{ benefitData.totolIncome }}</view>
    </view>
    <!-- 内容 -->
    <view class="statistic__content">
      <u-tabs
        :list="list"
        name="name"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <!-- 日期列表 -->
    <scroll-view
      class="home__grid-group"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view class="">
        <view
          class="flex justify-between content_box"
          v-for="(item, index) in benefitList"
          :key="index"
        >
          <!-- 日期 -->
          <view class=""> {{ item.updateTime }} </view>
          <!-- 类型 -->
          <view class=""> {{ item.changeTypeName }} </view>
          <!-- 交易收益 -->
          <view class=""> {{ item.changeAmount }} </view>
          <!-- <view class=""> {{ item.afterWithdrawalAmount }} </view> -->
        </view>
        <!-- 加载更多 -->
        <u-loadmore :status="status" />
      </view>
    </scroll-view>

    <!-- <u-popup v-model="showBottomDialog" mode="bottom" class="pop">
      <view class="pop__item" v-for="(item, index) in typeList" :key="index" @click="switchingChannel(item.channelNo)" >
        <u-image class="pop__icon" width="60rpx" height="60rpx" :src="item.logoImgUrl" ></u-image> 
        <view>{{ item.name }}</view>
      </view>
    </u-popup> -->
    <u-calendar
      v-model="showCalendar"
      mode="range"
      @change="calendarChange"
    ></u-calendar>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      benefitData: {},
      time: {},
      date: '',
      showCalendar: false,
      data: {
        changeType: '', //筛选
        startCreateTime: '',
        endCreateTime: '',
      },
      showBottomDialog: false,
      typeList: [],
      list: [
        {
          name: '交易收益',
          value: 'POS_PROFIT', //POS_PROFIT交易
        },
        {
          name: '活动收益',
          value: 'ACTIVE_PROFIT', //ACTIVE_PROFIT
        },
        {
          name: '流量卡收益',
          value: 'FLOW_PROFIT', //FLOW_PROFIT
        },
        {
          name: '其他收益',
          value: 'OTHER_PROFIT', //OTHER_PROFIT
        },
      ],
      current: 0,
      params: {
        accountType: 'POS_PROFIT', //POS_PROFIT交易
        changeType: '', //筛选
        startCreateTime: '',
        endCreateTime: '',
      },
      benefitList: [],
      pageNo: 1,
      pageSize: '10',
      scrollTop: 0,
      status: 'loadmore',
    };
  },
  mounted() {
    this.time = this.traversalTime(new Date().getTime());
    this.data.startCreateTime = this.getYesterdayDate();
    this.data.endCreateTime = this.time;
    this.date = this.data.startCreateTime + '至' + this.data.endCreateTime;
    this.getSumAccountDetail();
    this.params.startCreateTime = this.getYesterdayDate();
    this.params.endCreateTime = this.time;
    this.listAccountDetail();
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  methods: {
    change(index) {
      console.log('index=' + index);
      // 赋值当前切换tab为激活状态
      this.current = index;
      this.params.accountType = this.list[index].value;
      this.benefitList = [];
      this.pageNo = 1;
      this.listAccountDetail();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      //获取列表
      this.listAccountDetail();
    },
    calendarChange(e) {
      this.date = e.startDate + '至' + e.endDate;
      this.data.startCreateTime = e.startDate;
      this.data.endCreateTime = e.endDate;
      this.getSumAccountDetail();
      this.benefitList = [];
      this.pageNo = 1;
      this.params.startCreateTime = e.startDate;
      this.params.endCreateTime = e.endDate;
      this.listAccountDetail();
    },
    getSumAccountDetail() {
      this.$zx.order_api.sumAccountDetail(this.data).then((data) => {
        console.log('sumAccountDetail----->154', data);
        this.benefitData = data;
      });
    },
    //获取列表
    listAccountDetail() {
      let _that = this;
      _that.$zx.order_api
        .listAccountDetail(this.pageNo, this.pageSize, this.params)
        .then((data) => {
          console.log('listAccountDetail----->162', data.list);
          // _that.benefitList = _that.benefitList.concat(data);
          _that.benefitList = _that.benefitList.concat(data.list);
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
    traversalTime(timestamp) {
      //timestamp(时间戳)是整数，否则要parseInt转换
      let time = new Date(timestamp);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      return y + '-' + this.addTimes(m) + '-' + this.addTimes(d);
    },
    getYesterdayDate() {
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 6); // 减去一天
      let y = yesterday.getFullYear();
      let m = yesterday.getMonth() + 1;
      let d = yesterday.getDate();
      let h = yesterday.getHours();
      let mm = yesterday.getMinutes();
      let s = yesterday.getSeconds();
      return y + '-' + this.addTimes(m) + '-' + this.addTimes(d);
    },
    addTimes(m) {
      return m < 10 ? '0' + m : m;
    },
  },
};
</script>

<style scoped lang="scss">
.statistic {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 10rpx;

  &__title {
    margin: 20rpx;
  }

  &__date {
    // width: 300rpx;
    background-color: white;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
  }

  &__filter {
    background-color: white;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
  }

  &__tip {
    font-size: 11px;
    margin-left: 20rpx;
  }

  &__header {
    background-image: url(/static/image/benefit/img_trade_query_bg.png);
    background-size: 100% 100%;
    color: white;
    text-align: center;
    height: 244rpx;
    padding: 20rpx 30rpx;
  }

  &__header-title {
    margin-top: 30rpx;
  }

  &__header-money {
    margin-top: 30rpx;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40rpx;
  }

  &__item {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }

  &__content {
    background-color: white;
    margin: 20rpx;
    border-radius: 20rpx;
    padding: 20rpx;
  }
}
.content_box {
  padding: 20rpx 20rpx;
  background-color: white;
  margin: 0rpx 20rpx 20rpx;
  border-radius: 20rpx;
}
</style>
